<template>
    <view class="about-container">
        <!-- 应用信息 -->
        <view class="app-info">
            <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
            <view class="name">脑卒中风险评估系统</view>
            <view class="version">版本 1.0.0</view>
        </view>
        
        <!-- 功能介绍 -->
        <view class="feature-section">
            <view class="section-title">功能介绍</view>
            <view class="features">
                <view class="feature-item" v-for="(feature, index) in features" :key="index">
                    <view class="icon" :style="{ backgroundColor: feature.color }">
                        <u-icon :name="feature.icon" size="32" color="#fff"></u-icon>
                    </view>
                    <view class="content">
                        <view class="title">{{feature.title}}</view>
                        <view class="description">{{feature.description}}</view>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 联系我们 -->
        <view class="contact-section">
            <view class="section-title">联系我们</view>
            <view class="contacts">
                <view class="contact-item">
                    <u-icon name="phone" size="32" color="#409EFF"></u-icon>
                    <text class="label">客服电话</text>
                    <text class="value">400-123-4567</text>
                </view>
                <view class="contact-item">
                    <u-icon name="email" size="32" color="#409EFF"></u-icon>
                    <text class="label">客服邮箱</text>
                    <text class="value">support@example.com</text>
                </view>
                <view class="contact-item">
                    <u-icon name="map" size="32" color="#409EFF"></u-icon>
                    <text class="label">公司地址</text>
                    <text class="value">北京市海淀区中关村大街1号</text>
                </view>
            </view>
        </view>
        
        <!-- 版权信息 -->
        <view class="copyright">
            <text>© 2024 脑卒中风险评估系统</text>
            <text>All Rights Reserved</text>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            features: [
                {
                    icon: 'heart',
                    color: '#FF6B6B',
                    title: '健康评估',
                    description: '提供专业的脑卒中风险评估，帮助用户了解自身健康状况'
                },
                {
                    icon: 'chat',
                    color: '#409EFF',
                    title: '在线咨询',
                    description: '支持与专业医生在线交流，获取专业的医疗建议'
                },
                {
                    icon: 'file-text',
                    color: '#67C23A',
                    title: '评估记录',
                    description: '记录用户的评估历史，方便追踪健康状况变化'
                },
                {
                    icon: 'bell',
                    color: '#E6A23C',
                    title: '健康提醒',
                    description: '定期提醒用户进行健康评估，关注健康状况'
                }
            ]
        }
    }
}
</script>

<style lang="less" scoped>
.about-container {
    min-height: 100vh;
    background-color: #F8F8F8;
    padding: 40rpx 30rpx;
    
    .app-info {
        text-align: center;
        margin-bottom: 60rpx;
        
        .logo {
            width: 160rpx;
            height: 160rpx;
            margin-bottom: 20rpx;
        }
        
        .name {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 10rpx;
        }
        
        .version {
            font-size: 28rpx;
            color: #999;
        }
    }
    
    .feature-section,
    .contact-section {
        background-color: #fff;
        border-radius: 20rpx;
        padding: 30rpx;
        margin-bottom: 30rpx;
        
        .section-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 30rpx;
        }
    }
    
    .feature-section {
        .features {
            .feature-item {
                display: flex;
                align-items: flex-start;
                margin-bottom: 30rpx;
                
                &:last-child {
                    margin-bottom: 0;
                }
                
                .icon {
                    width: 64rpx;
                    height: 64rpx;
                    border-radius: 32rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 20rpx;
                    flex-shrink: 0;
                }
                
                .content {
                    flex: 1;
                    
                    .title {
                        font-size: 32rpx;
                        font-weight: bold;
                        color: #333;
                        margin-bottom: 10rpx;
                    }
                    
                    .description {
                        font-size: 28rpx;
                        color: #666;
                        line-height: 1.6;
                    }
                }
            }
        }
    }
    
    .contact-section {
        .contacts {
            .contact-item {
                display: flex;
                align-items: center;
                margin-bottom: 30rpx;
                
                &:last-child {
                    margin-bottom: 0;
                }
                
                .label {
                    font-size: 28rpx;
                    color: #666;
                    margin: 0 20rpx 0 10rpx;
                }
                
                .value {
                    font-size: 28rpx;
                    color: #333;
                }
            }
        }
    }
    
    .copyright {
        text-align: center;
        margin-top: 60rpx;
        
        text {
            display: block;
            font-size: 24rpx;
            color: #999;
            line-height: 1.6;
        }
    }
}
</style> 